<template>
  <div class="label"><span class="nan" v-if="props.label === '男'">♂</span><span class="nv" v-else>♀</span>{{ props.age }}岁
  </div>
</template>

<script setup>
const props = defineProps({
  //性别
  label: {
    type: String
  },
  // 年龄
  age: {
    type: Number
  }
});
</script>

<style scoped lang="scss">
.label {
  width: 66px;
  height: 20px;
  background: rgba(67, 51, 63, 0.7);
  font-size: 10px;
  margin-left: -10px;
  border-radius: 10%;
  color: #8b8c96;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;

  .nan {
    color: #14bae2;
    width: 10px;
    height: 10px;
    font-size: 8px;
  }

  .nv {
    color: #da6969;
    width: 10px;
    height: 10px;
    font-size: 8px;
  }
}
</style>